#{extends 'main.html' /} #{set title:'Shopping' /} #{if flash?.error}
<div class="error">
	<p style="color: #c00">${flash.error}</p>
</div>
#{/if} #{if flash?.success}
<div class="success">
	<p style="color: #5fa022">${flash.success}</p>
</div>
#{/if}
<div class="row-fluid">
	<div>
		<div class="span8 offset9">
			#{form @Shop.search()} 
				<input id="dish" placeholder="    Search for dishes here" name="dish"> 
			#{/form}
		</div>
		<br><br><br>
		<div class="span8 offset1">
			<table>
				<tr>
					<td class="span2"><h4>Restaurant</h4></td>
					<td class="span2"><h4>Dish</h4></td>
					<td class="span2"></td>
					<td class="span1"><h4>Price</h4></td>
					<td class="span2"><h4>Add to cart</h4></td>
				</tr>

				#{list items:dishes, as:'dish'}

				<tr height="50px">
					<td>${dish.restaurant.name}</td>
					<td>${dish.name}</td>
					<td><a href="${dish.path}"> <img width="40px"
							height="40px" src="${dish.path}">
					</a></td>
					<td>€${String.format("%.2f", dish.price)}</td>
					<td><input class="btn btn-small btn-primary add" type="button"
						value="Add" id="${dish.id}"></td>
				</tr>
				#{/list}

			</table>

			<br>
			<hr />

			<div id="resturant" class="pull-left">
				<a href='/application/home'><input
					class="btn btn-small btn-primary" type="button"
					value="Change location"></a> <a href='/shop/cart'><input
					class="btn btn-small btn-primary" type="button" value="Go to cart"></a>
			</div>
			<br>
			<hr />
		</div>


	</div>
	<div id="message" style="display: none">
		Item has been added to cart</div>
			<script type="text/javascript">
		$(document).ready(function(){
		$(".add").click(function(){
			var dish_id = this.id;
			var url = #{jsAction @shop.addToShoppingCart(':input') /}
	        $.get(url({input: dish_id}), function() {
	        	
        	});        	
        	$('#message').show(50).delay(500);  
        	$('#message').hide(50);
        	
		});
	});
</script>